<template>
  <el-dialog
    class="public-dialog"
    :title="`${isEdit ? '修改' : '新增'}`"
    width="560"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="h-[260px]" v-loading="loading">
      <VForm
        ref="form"
        :model="model"
        :fieldList="fieldList"
        :options="formOption"
        :rules="rules"
        :disabled="disabled"
        :originOption="optionsData"
      >
        <template #bill_size="{ value, input }">
          <BillSize :value="value" @input="input" :options="optionsData" />
        </template>
      </VForm>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import VForm from "@/components/Form/index.vue";
import BillSize from "../BillSize/index.vue";

import { overallOptions } from "@/api/public";
import { strHump } from "@/utils/index";
import { bill_html } from "./data.js";
import { billCreate, billDetail, billUpdate } from "../api";

const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  type: { type: String, default: "" },
});

const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const formOption = {
  inline: true,
  labelPosition: "top",
};

const rules = {
  model_name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
  bill_name: [{ required: true, message: "请输入面单名称", trigger: "blur" }],
  bill_size: [{ required: true, message: "请选择标签尺寸", trigger: "blur" }],
};

const form = ref();
const model = ref({});
const loading = ref();
const optionsData = ref({});

const publicStyle = { style: { width: "502px" } };
const fieldList = [
  {
    field: "bill_name",
    label: "面单名称",
    ...publicStyle,
  },
  {
    field: "bill_lang",
    label: "面单语言",
    ...publicStyle,
  },
  {
    field: "bill_size",
    label: "标签尺寸",
    ...publicStyle,
    slot: "bill_size",
  },
];

onMounted(() => {
  getOptions();
});

const getOptions = async () => {
  try {
    const bill = "base.bill";
    const { data } = await overallOptions({
      params: [bill],
    });
    const billSize = data?.[strHump(bill)];
    if (billSize) {
      optionsData.value = {
        ...data?.[strHump(bill)],
      };
    }
  } catch (e) {
    console.error(e);
  }
};

watch(
  () => props.id,
  (val) => {
    nextTick(() => {
      if (val) getDetail(val);
    });
  }
);

const getDetail = async (id) => {
  try {
    loading.value = true;
    const { type } = props;
    const { data } = await billDetail(type, { id });

    const { bill_size_l, bill_size_w, ...reset } = data;
    model.value = {
      ...reset,
      bill_size: {
        bill_size_l,
        bill_size_w,
      },
    };
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const isEdit = computed(() => {
  return !!props.id;
});

const handleSave = async () => {
  try {
    const { bill_size, ...formInfo } = await form.value.submit();
    const api = {
      edit: billUpdate,
      add: billCreate,
    };
    const { id, type } = props;

    const { code, message } = await api[isEdit.value ? "edit" : "add"](type, {
      id: id || undefined,
      ...formInfo,
      ...bill_size,
      bill_html: type == "invoice-type" ? bill_html : "",
    });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    ElMessage.success(isEdit.value ? "修改成功" : "保存成功");
    handleClose(true);
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  model.value = {};
  await nextTick();
  form.value.resetForm();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
